/* 审批步骤组件
 * @Author: Setsuna
 * @Email: 601890383@qq.com
 * @FilePath: \src\components\ProcessList\index.tsx
 * @Date: 2021-09-27 15:30:46
 * @LastEditTime: 2021-12-02 15:58:11
 */
import React from 'react'
import { Steps } from 'antd'
import { WithToolbar } from '../PhotoView'

const TASK_STATUS_ENUM = {
  0: '审批中',
  1: '审批通过',
  2: '审批不通过',
}

const renderStep = (item: any, index: any) => {
  let { attachments = [], taskStatus, message, assigneeName, roleName, assigneeTime } = item
  // if (taskStatus === 0) {
  //   return <Steps.Step status="process" title={TASK_STATUS_ENUM[taskStatus]} key={index} />
  // } else {

  // }
  return (
    <Steps.Step
      key={index}
      status={transformTaskStatus(taskStatus)}
      title={assigneeName}
      subTitle={roleName + '\xA0\xA0\xA0\xA0\xA0' + (taskStatus !== 0 ? assigneeTime : '')}
      description={
        <>
          <div>审批状态：{TASK_STATUS_ENUM[taskStatus] || taskStatus}</div>
          {message && <div>审批意见：{message}</div>}
          {attachments && Array.isArray(attachments) && attachments.length > 0 && (
            <div>
              附件：
              <WithToolbar imagesList={attachments} type="processList" />
            </div>
          )}
        </>
      }
    />
  )
}

const transformTaskStatus = taskStatus => {
  let obj = {
    0: 'process',
    1: 'finish',
    2: 'error',
  }
  return obj[taskStatus]
}

export default function ProcessList(props) {
  const {
    record: { processDetailResult },
  } = props
  const processDetails = processDetailResult?.processDetails ?? []
  return processDetailResult ? (
    <div className="process-wrapper">
      <h3>审批流程</h3>
      <Steps direction="vertical" size="small" status="finish">
        <Steps.Step
          status="finish"
          title={processDetailResult.startUserName}
          subTitle={processDetailResult.roleName + '\xA0\xA0\xA0\xA0\xA0' + processDetailResult.taskStartTime}
          description={<span>发起人&nbsp;&nbsp;&nbsp;&nbsp;提交审批</span>}
        />
        {processDetails.map((item, index) => renderStep(item, index))}
      </Steps>
    </div>
  ) : null
}
